import React, { Component } from 'react'
import './index.css';
import axios from 'axios';

export default class YiYan extends Component {
    state = {
        message: {}  //
    }

    render() {
        return (
            <div className="yiyan-container" style={{backgroundImage: 'url(http://api.xiaohigh.com:8090/image/random)'}}>
                <div className="text">
                    <p className="left">『</p>
                    <p className="center"> {this.state.message.hitokoto}</p>
                    <p className="right">』</p>
                    <p className="author">{this.state.message.from}</p>
                </div>
                <div className="mask"></div>
            </div>
        )
    }

    //组件挂载完毕
    componentDidMount(){
        //调用一次
        this.getMessage();
        //启动定时器
        this.timer = setInterval(() => {
            this.getMessage();
        }, 5000);
    }

    //组件将要卸载
    componentWillUnmount(){
        //清空定时器
        clearInterval(this.timer);
    }

    getMessage = async () => {
        try{
            //发送 AJAX 请求获取一言的信息    axios({})  axios('')
            let {data} = await axios('https://v1.hitokoto.cn/');// {status, statusText, headers, data, config, request}
            this.setState({
                message: data
            })
        }catch(e){
            console.log('网络请求异常....');
        }
    }
}
